<!DOCTYPE html>
<html>
<head>
  <title></title>
  #parse("sys/header.html")
  <style>
    .upload-list {
      display: inline-block;
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
      margin-right: 4px;
    }

    .upload-list img {
      width: 100%;
      height: 100%;
    }

    .upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);
    }

    .upload-list:hover .upload-list-cover {
      display: block;
    }

    .upload-list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }
  </style>
</head>
<body>
<div id="rrapp" v-cloak>
  <div v-show="showList">
    <Row :gutter="16">
      <div class="search-group">
        <i-col span="4">
          <i-input v-model="q.name" @on-enter="query" placeholder="名称"/>
        </i-col>
        <i-button @click="query">查询</i-button>
      </div>
      <div class="buttons-group">
        #if($shiro.hasPermission("goods:save"))
        <i-button type="info" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</i-button>
        #end
        #if($shiro.hasPermission("goods:update"))
        <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改
        </i-button>
        #end
        #if($shiro.hasPermission("goods:delete"))
        <i-button type="error" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
        #end
        <i-button type="primary" @click="enSale"><i class="fa fa-hand-o-up"></i>&nbsp;上架</i-button>
        <i-button type="dashed" @click="unSale"><i class="fa fa-hand-o-down"></i>&nbsp;下架</i-button>
        <i-button type="warning" @click="openPro"><i class="fa fa-pencil-square-o"></i>&nbsp;产品
        </i-button>
        <i-button type="warning" @click="openSpe"><i class="fa fa-pencil-square-o"></i>&nbsp;规格
        </i-button>
      </div>
    </Row>
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
  </div>

  <Card v-show="!showList">
    <p slot="title">{{title}}</p>

    <Tabs value="name1">
      <Tab-Pane label="通用信息" name="name1">
        <i-form ref="formValidate" :model="goods" :rules="ruleValidate" :label-width="100">
          <Form-item label="商品类型" prop="categoryId">
            <i-input v-model="goods.categoryName" @on-click="categoryTree" icon="eye"
                     readonly="readonly"
                     placeholder="商品类型"/>
          </Form-item>
          <Form-item label="商品序列号" prop="goodsSn">
            <i-input v-model="goods.goodsSn" placeholder="商品序列号"/>
          </Form-item>
          <Form-item label="名称" prop="name">
            <i-input v-model="goods.name" placeholder="名称"/>
          </Form-item>
          <Form-item label="品牌" prop="brandId" style="width: 268px;">
            <i-select v-model="goods.brandId" filterable>
              <i-option v-for="brand in brands" :value="brand.id" :key="brand.id">{{brand.name}}
              </i-option>
            </i-select>
          </Form-item>

          <Form-item label="商品类型" prop="isSecKill" style="width: 268px;">
            <i-select v-model="goods.isSecKill">
              <i-option value="1">普通商品</i-option>
              <i-option value="2">秒杀</i-option>
              <i-option value="3">团购</i-option>
            </i-select>
          </Form-item>
          <Form-item label="活动开始时间" prop="startTime" v-if="goods.isSecKill==3||goods.isSecKill==2">
            <Date-picker v-model="goods.startTime" placeholder="活动开始时间"></Date-picker>
          </Form-item>
          <Form-item label="活动结束时间" prop="endTime" v-if="goods.isSecKill==3||goods.isSecKill==2">
            <Date-picker v-model="goods.endTime" placeholder="活动结束时间"></Date-picker>
          </Form-item>

          <Form-item label="成团时间(分钟)" prop="successTime" v-if="goods.isSecKill==3">
            <Input-number :min="0" :step="1" v-model="goods.successTime" placeholder="成团时间 单位分钟"
                          style="width: 188px;"/>
          </Form-item>
          <Form-item label="成团时间人数" prop="successPeople" v-if="goods.isSecKill==3">
            <Input-number :min="0" :step="1" v-model="goods.successPeople" placeholder="成团时间 单位分钟"
                          style="width: 188px;"/>
          </Form-item>
          <Form-item label="团购价" prop="groupPrice" v-if="goods.isSecKill==3">
            <Input-number :min="0" :step="1" v-model="goods.groupPrice" placeholder="团购价"
                          style="width: 188px;"/>
          </Form-item>


          <Form-item label="类别" prop="attributeCategory" style="width: 268px;">
            <i-select v-model="goods.attributeCategory" filterable label-in-value>
              <i-option v-for="attributeCategory in attributeCategories"
                        :value="attributeCategory.id"
                        :key="attributeCategory.id">{{attributeCategory.name}}
              </i-option>
            </i-select>
          </Form-item>
          <Form-item label="商品库存" prop="goodsNumber">
            <Input-number :min="0" :step="1" v-model="goods.goodsNumber" placeholder="商品库存"
                          style="width: 188px;"/>
          </Form-item>


          <!--<Form-item label="商品单位" prop="goodsUnit" style="width: 268px;">-->
          <!--<i-select v-model="goods.goodsUnit" filterable>-->
          <!--<i-option v-for="macro in macros" :value="macro.value" :key="macro.value">{{macro.name}}-->
          <!--</i-option>-->
          <!--</i-select>-->
          <!--</Form-item>-->
          <!--<Form-item label="单价" prop="unitPrice">-->
          <!--<Input-number :min="0" :step="1" v-model="goods.unitPrice" placeholder="单价"-->
          <!--style="width: 188px;"/>-->
          <!--</Form-item>-->
          <Form-item label="零售价格" prop="retailPrice">
            <Input-number :min="0" :step="1" v-model="goods.retailPrice" placeholder="零售价格"
                          style="width: 188px;"/>
          </Form-item>
          <Form-item label="市场价" prop="marketPrice">
            <Input-number :min="0" :step="1" v-model="goods.marketPrice" placeholder="市场价"
                          style="width: 188px;"/>
          </Form-item>
          <Form-item label="分佣比例" prop="brokerage_percent">
            <Input-number :min="0" :step="1" v-model="goods.brokerage_percent" placeholder="分佣比例"
                          style="width: 188px;"/>
          </Form-item>
          <Form-item label="邮费价格" prop="extraPrice">
            <Input-number :min="0" :step="1" v-model="goods.extraPrice" placeholder="邮费价格"
                          style="width: 188px;"/>
          </Form-item>
          <!--
          <Row>
              <i-col span="16">
                  <Form-item label="商品主图" prop="primaryPicUrl">
                      <i-input v-model="goods.primaryPicUrl" placeholder="商品主图" readonly/>
                  </Form-item>
              </i-col>
              <i-col span="3">
                  <Form-item :label-width="1">
                      <Upload style="width: 300px;" action="../sys/oss/upload" :format="['jpg','jpeg','png']"
                              max-size="2048"
                              :on-success="handleSuccessPicUrl" :on-format-error="handleFormatError"
                              :show-upload-list="false"
                              :on-exceeded-size="handleMaxSize">
                          <i-button icon="ios-cloud-upload-outline">上传图片</i-button>
                      </Upload>
                  </Form-item>
              </i-col>
              <i-col span="3">
                  <Form-item :label-width="1">
                      <i-button icon="eye" @click="eyeImagePicUrl">预览图片</i-button>
                  </Form-item>
              </i-col>
          </Row>
          -->
          <Row>
            <i-col span="16">
              <Form-item label="商品列表图" prop="listPicUrl">
                <i-input v-model="goods.listPicUrl" placeholder="商品封面"/>
              </Form-item>
            </i-col>
            <i-col span="3">
              <Form-item :label-width="1">
                <Upload style="width: 300px;" action="../sys/oss/upload"
                        :format="['jpg','jpeg','png']"
                        max-size="2048"
                        :on-success="handleSuccessListPicUrl" :on-format-error="handleFormatError"
                        :show-upload-list="false"
                        :on-exceeded-size="handleMaxSize">
                  <i-button icon="ios-cloud-upload-outline">上传图片</i-button>
                </Upload>
              </Form-item>
            </i-col>
            <i-col span="3">
              <Form-item :label-width="1">
                <i-button icon="eye" @click="eyeImageListPicUrl">预览图片</i-button>
              </Form-item>
            </i-col>
          </Row>
        </i-form>
      </Tab-Pane>
      <Tab-Pane label="详细描述" name="name2">

        <template>
          <div class="upload-list" v-for="item in uploadList">
            <template v-if="item.status === 'finished'">
              <img :src="item.imgUrl"/>
              <div class="upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>
          <Upload
              ref="upload"
              :show-upload-list="false"
              :default-file-list="uploadList"
              :on-success="handleSuccess"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              action="../sys/oss/upload"
              style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="camera" size="20"></Icon>
            </div>
          </Upload>
          <Modal title="查看图片" v-model="visible">
            <img :src="imgName" v-if="visible" style="width: 100%"/>
          </Modal>
        </template>
        <div id="goodsDesc"></div>
      </Tab-Pane>
      <Tab-Pane label="其他信息" name="name3">
        <i-form ref="formValidate" :model="goods" :rules="ruleValidate" :label-width="80">
          <Form-item label="排序" prop="sortOrder">
            <Input-number :min="0" :step="1" v-model="goods.sortOrder" placeholder="排序"
                          style="width: 188px;"/>
          </Form-item>
          <Form-item label="上架" prop="isOnSale">
            <Radio-group v-model="goods.isOnSale">
              <Radio label="1">
                <span>是</span>
              </Radio>
              <Radio label="0">
                <span>否</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="是否新商品" prop="isNew">
            <Radio-group v-model="goods.isNew">
              <Radio label="1">
                <span>是</span>
              </Radio>
              <Radio label="0">
                <span>否</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="热销" prop="isHot">
            <Radio-group v-model="goods.isHot">
              <Radio label="1">
                <span>是</span>
              </Radio>
              <Radio label="0">
                <span>否</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="推广描述" prop="promotionDesc">
            <i-input v-model="goods.promotionDesc" placeholder="推广描述"/>
          </Form-item>
          <Form-item label="关键字" prop="keywords">
            <i-input v-model="goods.keywords" placeholder="关键字"/>
          </Form-item>
          <Form-item label="简明介绍" prop="goodsBrief">
            <i-input v-model="goods.goodsBrief" placeholder="简明介绍"/>
          </Form-item>
        </i-form>
      </Tab-Pane>
    </Tabs>
    <div style="padding-left: 20px; margin-bottom: 30px">
      <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
      <i-button type="warning" @click="reload" style="margin-left: 8px"/>
      返回</i-button>
      <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置
      </i-button>
    </div>
  </Card>
</div>

<!-- 选择类型 -->
<div id="categoryLayer" style="display: none;padding:10px;">
  <ul id="categoryTree" class="ztree"></ul>
</div>

<script src="${rc.contextPath}/js/shop/goods.js?_${date.systemTime}"></script>
</body>
</html>